{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/welcome/base.html" %}

{% block page_title %}{{ ftl('welcome-page14-page-title-alt') }}{% endblock %}

{% block page_image %}{{ static('img/products/vpn/common/social-share.png') }}{% endblock %}

{% block body_class %}welcome-page14{% endblock %}
{% set show_coupon = switch('vpn-moments-coupon-code') %}


{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('firefox_welcome_page10') }}
  {{ css_bundle('firefox_welcome_page14') }}
{% endblock %}

{% block js %}
  {% if show_coupon %}
    {{ js_bundle("firefox_welcome_page14") }}
  {% endif %}
{% endblock %}

{% block shoulder_cta %}{% endblock %}

{% if country_code in ["DE", "FR", "AT", "BE", "CH", "ES", "IT", "IE", "NL", "SE", "FI", "GB", "UK" ] %}
  {% set coupon_code = 'VPNCYBER20' %}
{% else %}
  {% set coupon_code = 'VPNPRIVACY20' %}
{% endif %}

{% block content_intro %}
  <section class="c-content-main">
    <div class="mzp-l-content mzp-t-content-md">
      <img class="c-main-image" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="60" alt="">
      <h1 class="c-main-title"> {% if show_coupon %}{{ ftl('welcome-page14-page-title') }}{% else %}{{ ftl('welcome-page14-page-title-alt') }}{% endif %}</h1>
      <p class="c-main-tagline">{{ ftl('welcome-page14-main-description-v2', fallback='welcome-page14-main-description') }}</p>
      <div class="c-main-cta">
        {{ vpn_product_referral_link(
          referral_id='welcome-page14',
          link_text=ftl('welcome-page14-get-mozilla-vpn'),
          class_name='mzp-t-product mzp-t-xl',
          page_anchor="#pricing",
          optional_attributes= {
                'data-cta-text' : 'Get Mozilla VPN',
                'data-cta-type' : 'vpn',
                'data-cta-position' : 'primary-cta',
          }
        )}}
      </div>
      {% if show_coupon %}
        <div class="c-coupon-container">
          <h2>{{ ftl('welcome-page14-use-code') }}</h2>
          <strong class="c-coupon-code">{{ coupon_code }}</strong>
          <button type="button" class="c-coupon-copy" id="code-copy" data-code="{{ coupon_code }}" data-success="{{ ftl('welcome-page14-code-copied') }}">{{ ftl('welcome-page14-copy-code') }}</button>
        </div>
      {% endif %}
    </div>
  </section>
{% endblock %}

{% block content_body %}
<section class="page-body">
  <div class="mzp-l-content mzp-t-content-md">
    <div class="mzp-l-columns mzp-t-columns-two">

      <div class="mzp-c-picto">
        <div class="mzp-c-picto-image">
          <img src="{{ static('img/firefox/welcome/page10/laptop.svg') }}" alt="">
        </div>
        <h3 class="mzp-c-picto-title">{{ ftl('welcome-page14-very-fast') }}</h3>
        <div class="mzp-c-picto-body">
          <p>{{ ftl('welcome-page14-wireguard-powered') }}</p>
        </div>
      </div>

      <div class="mzp-c-picto">
        <div class="mzp-c-picto-image">
          <img src="{{ static('img/firefox/welcome/page10/mobile.svg') }}" alt="">
        </div>
        <h3 class="mzp-c-picto-title">{{ ftl('welcome-page14-without-trace') }}</h3>
        <div class="mzp-c-picto-body">
          <p>{{ ftl('welcome-page14-never-log') }}</p>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block content_utility %}
<p>
  <strong>
    <a href="https://support.mozilla.org/kb/firefox-browser-welcome-pages/?utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}&entrypoint={{ _entrypoint }}">
      {{ ftl('welcome-page14-why-see-this') }}
    </a>
  </strong>
</p>
{% endblock %}
